// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')
import { parseTime } from '@/utils/index'
const getLastDays = (nowDate: any, dayStand: number) => {
  let tempDate = new Date(nowDate)
  let tempArrData = []
  for (let i = 0; i < dayStand; i++) {
    tempArrData.unshift(
      parseTime(tempDate.getTime() - i * 24 * 60 * 60 * 1000, '{m}/{d}')
    )
  }

  return tempArrData
}
const getRandomDataPercent = (dayStand: number) => {
  let tempDate = Array(dayStand).fill(100.0)
  for (let i = 0; i <= Math.floor(dayStand / 4); i++) {
    tempDate[Math.floor(Math.random() * dayStand)] = (
      99.8 +
      0.2 * Math.random()
    ).toFixed(2)
  }
  return tempDate
}
const getRandomDataNum = (dayStand: number, big: boolean) => {
  let tempDate = []
  for (let i = 0; i <= dayStand; i++) {
    tempDate.push(Math.ceil(big ? 500 * Math.random() : 100 * Math.random()))
  }
  return tempDate
}
export default class EchartsConfig {
  private myChart: any
  private option = {
    color: [
      '#2f4554',
      '#61a0a8',
      '#d48265',
      '#91c7ae',
      '#749f83',
      '#ca8622',
      '#bda29a',
      '#6e7074',
      '#546570',
      '#c4ccd3'
    ],
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    title: {
      text: '逾期统计分析',
      subtext: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ['正常', '逾期', '不良']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '正常',
        type: 'bar',
        stack: '广告',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '逾期',
        type: 'bar',
        stack: '广告',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '不良',
        type: 'bar',
        stack: '广告',
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  }

  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }
  public setOption(config: any) {
    this.option.title.subtext = config.name
    let tempXDate = getLastDays(config.end, config.dayStand)
    this.option.xAxis[0].data = tempXDate
    this.option.series.forEach((item, index) => {
      item.data = getRandomDataNum(config.dayStand, index === 0 ? true : false)
    })
    this.myChart && this.myChart.setOption(this.option)
  }
}
